/*
 * @Author: xiaosihan 
 * @Date: 2023-08-07 21:13:42 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2024-03-25 04:14:14
 */



import LeftOutlined from "@ant-design/icons/lib/icons/LeftOutlined";
import RightOutlined from "@ant-design/icons/lib/icons/RightOutlined";
import { autorun, toJS } from "mobx";
import { useEffect, useRef, useState } from "react";
import styles from "./preview2D.module.less";
import editorStore from "@/editorComponent/editorStore";
import Transition from "three-base/Transition";
import preview2DRenderer from "@/editorComponent/preview2DRenderer";
import { Spin } from "antd";
import clsx from "clsx";
import preview2DStore from "./preview2DStore";

interface Iprops {
  showList?: boolean;
  show: boolean;
}

// 2d 预览
export default function Preview2D(props: Iprops) {

  const transition = useRef(new Transition({ left: 0 }));
  const verticalTransition = useRef(new Transition({ top: 0 }));
  const dom = useRef<HTMLDivElement | null>(null);
  const listDom = useRef<HTMLDivElement | null>(null);
  const [index, setIndex] = useState(preview2DStore.index);
  const [mockupUrls, setMockupUrls] = useState<Array<string>>([]);

  useEffect(() => {
    transition.current.onChange(({ left }) => {
      if (dom.current) {
        dom.current.scrollLeft = left;
      }
    });
    verticalTransition.current.onChange(({ top }) => {
      if (listDom.current) {
        listDom.current.scrollTop = top;
      }
    });

    setTimeout(() => {
      const { index } = preview2DStore;
      if (dom.current) {
        const react = window.getComputedStyle(dom.current);
        transition.current.reset({
          left: parseInt(react.width) * index
        });
      }

      if (listDom.current) {
        const react = window.getComputedStyle(listDom.current);
        verticalTransition.current.reset({
          top: (100 * index) - ((parseInt(react.height) - 100) / 2)
        });
      }
    }, 100);

  }, []);

  useEffect(() => autorun(() => {
    const { index } = preview2DStore;

    setIndex(index);

    if (dom.current) {
      transition.current.reset({
        left: dom.current.scrollLeft
      });
      const react = window.getComputedStyle(dom.current);
      transition.current.set({ left: parseInt(react.width) * index });
    }

    if (listDom.current) {
      verticalTransition.current.reset({
        top: listDom.current.scrollTop
      });
      const react = window.getComputedStyle(listDom.current);
      verticalTransition.current.set({ top: (100 * index) - ((parseInt(react.height) - 100) / 2) });
    }
  }), []);

  useEffect(() => autorun(() => {
    const { needUpdateTime } = editorStore;
    if (needUpdateTime > -1) {
      mockupUrls.map(mockupUrl => {
        preview2DRenderer.renderMockups(mockupUrl);
      });
    }
  }, { delay: 30 }), [mockupUrls]);

  useEffect(() => autorun(() => {
    const goodsData = toJS(editorStore.goodsData);
    if (goodsData) {
      setMockupUrls(toJS(goodsData.mockupUrls));
    }
  }), []);

  return (
    <div
      className={clsx(styles.preview2D, props.showList && styles.showList, props.show && styles.show)}
    >

      {/* <Spin className={styles.spin} spinning={true} /> */}

      <span
        className={styles.left}
        onClick={() => {
          const { index } = preview2DStore;
          const i = Math.max(0, index - 1);
          preview2DStore.setIndex(i);
        }}
      >
        <LeftOutlined />
      </span>

      <span
        className={styles.right}
        onClick={() => {
          const { index } = preview2DStore;
          const i = Math.min(index + 1, mockupUrls.length - 1);
          preview2DStore.setIndex(i);
        }}
      >
        <RightOutlined />
      </span>

      <div
        ref={dom}
        className={styles.canvas_box}
      >
        {
          mockupUrls.map(url => {
            const { design_data } = editorStore;
            return (
              <canvas
                key={url}
                width={280 * 4}
                height={280 * 4}
                className={styles.canvas}
                ref={dom => dom && preview2DRenderer.addMockupMesh(url, dom, design_data.colorValue)}
              />
            );
          })
        }
      </div>

      {
        props.showList &&
        <div
          ref={listDom}
          className={styles.list}
        >
          {
            mockupUrls.map((url, i) => {
              const { design_data } = editorStore;
              return (
                <canvas
                  key={url}
                  width={100}
                  height={100}
                  className={clsx(styles.canvas, (index === i) && styles.active)}
                  ref={dom => dom && preview2DRenderer.addMockupMesh(url, dom, design_data.colorValue)}
                  onClick={() => preview2DStore.setIndex(i)}
                />
              );
            })
          }
        </div>
      }

    </div>
  );

}